<template>
  <div>
    <div class="div-inquire">
      <div class="div-inquire-left">
        <el-form v-model="params" ref="paramsRefs" inline>
          <el-form-item label="操作人名称" label-width="100px" prop="name">
            <el-input v-model="params.name" placeholder="请输入操作人名称" @clear="clearName" clearable></el-input>
          </el-form-item>
        </el-form>
        <el-button @click="clickReset" plain>重置</el-button>
        <el-button type="primary" @click="clickSearch">搜索</el-button>
      </div>
      <div class="div-inquire-right">
        <el-button icon="el-icon-upload2" type="primary"  @click="clickExport">数据导出</el-button>
      </div>

    </div>
    <div class="div-table">
      <el-table
        ref="multipleTable"
        :data="tableData"
        :header-cell-style="{background:'#F5F7FA'}"
        style="width: 100%"
        v-loading="dataListLoading">
        <el-table-column label="操作人名称" prop="createByName"></el-table-column>
        <el-table-column label="操作动作" prop="createOperation"></el-table-column>
        <el-table-column label="转让日志" prop="remark"></el-table-column>
        <el-table-column label="操作时间" prop="createTime">

        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="changePageSize"
        @current-change="turnToPage"
        :current-page="queryInfo.pageIndex"
        :page-sizes="[5, 10, 20, 50, 100, 200]"
        :page-size="queryInfo.pageSize "
        layout="total, prev, pager, next, sizes, jumper"
        :total="totalPage"
        id="div-e-paging-id">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {getUserInfo} from '../../../../api/sys'
import {createOperationList, exportTurnover} from '../../../../api/customer/turnover'

export default {
  name: 'regional-list-details-turnover',
  props: {
    id: {
      type: Number,
      default: null
    }
  },
  created () {
    this.getUserInfoReq()
    this.paging()
  },
  data () {
    return {
      tableData: [],
      dataListLoading: false,
      queryInfo: {
        pageIndex: 1,
        pageSize: 20
      },
      totalPage: 1,
      params: {
        name: ''
      },
      userInfo: {}
    }
  },
  methods: {
    paging () {
      if (this.id) {
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/ent/customer/flow/paging'),
          method: 'POST',
          data: this.$http.adornData({
            'conditions': {
              'createByName': this.params.name,
              'customerId': this.id
            },
            'inOrder': '',
            'orderBy': '',
            'pageNum': 1,
            'pageSize': 20
          })
        }).then(({data}) => {
          if (data.code === 0) {
            this.transformTurnoverData(data.data.records)
            this.tableData = data.data.records
            this.totalPage = data.data.total
          } else {
            this.$message.error(data.msg)
          }
          this.dataListLoading = false
        })
      }
    },
    // 转化数据结构
    transformTurnoverData (data = []) {
      if (data) {
        data.forEach((item) => {
          item.createOperation = ''
          item.createOperation = createOperationList[item.actionTag]
        })
      }
    },
    getUserInfoReq () {
      getUserInfo(
        (data) => { this.userInfo = data.user }
      )
    },
    changePageSize (val) {
      this.queryInfo.pageSize = val
    },
    turnToPage (val) {
      this.queryInfo.pageIndex = val
    },
    clearName () {
      this.paging()
    },
    clickReset () {
      // this.$refs['paramsRefs'].resetFields()
      this.params.name = ''
      this.paging()
    },
    clickSearch () {
      this.paging()
    },
    clickExport () {
      exportTurnover(
        {
          'createByName': this.userInfo.nickName,
          'customerId': this.id
        },
        '流转记录'
      )
    }

  }
}
</script>

<style lang="less" scoped>
.div-inquire{
  display: flex;
  justify-content: space-between;
  .div-inquire-left{
    display: flex;
    align-items: flex-start;
  }
  .div-inquire-right{
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
  }
}
</style>
